<template>
  <d2-container>
    <template slot="header">
      <div class="header">
        <h1>资源审核</h1>
        <el-select v-model="courseId" filterable placeholder="请选择课程" style="width: 500px" @change="changeCourse">
          <el-option
            v-for="item in courseData"
            :key="item.courseId"
            :label="item.courseName"
            :value="item.courseId">
          </el-option>
        </el-select>
        <div>
          <el-form
            :inline="true"
            :model="queryForm"
            class="demo-form-inline query_form"
            ref="queryForm"
          >
            <el-form-item class="query_item" prop="chapterName" size="small" label="章节名称">
              <el-input v-model="queryForm.chapterName" placeholder="章节名称" :clearable="true"></el-input>
            </el-form-item>
            <el-form-item class="query_item" size="small">
              <el-button type="primary" @click="queryChapterBtn()">查询</el-button>
              <el-button @click="resetQueryForm('queryForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-button round @click="showAll">{{ showALlMsg }}</el-button>
      </div>
    </template>
    <el-table
      class="table"
      :data="tableData"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column
        type="index"
        width="50"
        align="center"
      >
      </el-table-column>
      <el-table-column
        v-for="(val_en, key_ch) in colLabel"
        :key="val_en"
        :prop="key_ch"
        :label="val_en"
        min-width="150"
        sortable
        show-overflow-tooltip
        header-align="center"
      >
      </el-table-column>
      <el-table-column
        min-width="80"
        header-align="center"
        label="操作"
        fixed="right">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="updateChapterBtn(scope.$index, tableData)"
            type="default"
            size="small">
            审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="showUpdateDialog"
      width="30%"
      :before-close="handleClose"
      class="operate_dialog"
    >
      <div class="operate_chapter" v-if="showUpdateDialog">
        <el-form
          ref="operateForm"
          :model="operateForm"
          :rules="chapter_rules"
          :disabled="operateDisabled"
          label-width="auto"
          class="operate_form"
        >
          <div class="main">
            <el-form-item label="审核通过" prop="status">
              <el-switch
                v-model="operateForm.status"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="showUpdateDialog = false">取 消</el-button>
    <el-button type="primary" @click="DialogClick(operateForm)">确 定</el-button>
  </span>
    </el-dialog>
    <template slot="footer">
      <div class="pagination">
        <el-pagination
          background
          :current-page="page"
          :page-size="size"
          :pager-count="5"
          layout="prev, pager, next, jumper"
          :total="params.total"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </template>
  </d2-container>
</template>

<script>
import { GetChapter, UpdateChapter } from '@api/chapter/index'
import { GetAllCourse } from '@api/course/index'

export default {
  name: 'index',
  data () {
    return {
      tableData: [],
      colName_ch: {
        chapterId: '章节ID',
        chapterName: '章节名称',
        chapterNum: '章节数',
        chapterSign: '是否有章节',
        courseId: '章节所属课程ID',
        priority: '优先级',
        preChapterId: '前置章节ID',
        resourceUrl: '资源地址',
        createTime: '章节创建时间',
        createName: '章节创建人',
        updateTime: '章节修改时间',
        updateName: '章节修改人',
        delSign: '删除标识',
        status: '状态',
        courseName: '课程名称'
      },
      showLabel: [
        'courseName',
        'chapterName',
        'chapterNum',
        'chapterSign',
        'resourceUrl',
        'createTime',
        'createName',
        'updateTime',
        'updateName',
        'delSign',
        'status'
      ],
      params: {},
      queryForm: {
        chapterName: ''
      },
      operateForm: {
        chapterId: '',
        chapterName: '',
        chapterNum: '',
        chapterSign: '',
        courseId: '',
        createName: '',
        createTime: '',
        resourceUrl: '',
        preChapterId: '',
        priority: '',
        updateName: '',
        updateTime: '',
        status: '',
        delSign: ''
      },
      page: 1,
      size: 12,
      showUpdateDialog: false,
      operateString: '',
      dialogTitle: '新增章节',
      chapter_rules: {
        status: [
          {
            required: true,
            message: '审核状态不能为空',
            trigger: 'blur'
          }
        ]
      },
      operateDisabled: false,
      courseData: [],
      courseId: '',
      showALlMsg: '显示全部'
    }
  },
  methods: {
    /**
       * @description 调用api get接口，获取章节数据
       * @param {Object} params 查询参数
       * @return {Object} response 查询结果
       */
    async getChapterByApi (params) {
      let response
      await GetChapter(params).then(res => {
        response = res
      })
      return response
    },
    /**
       * @description 调用api update接口，修改一行数据
       * @param {Object} params 修改参数
       */
    async updateChapterByApi (params) {
      await UpdateChapter(params).then(res => {
        console.log(res.data)
      })
    },
    /**
       * 根据查询参数和用户id获取tableData表格数据和total数据总数
       * @param {Object} params 查询参数
       */
    getChapter (params) {
      // 添加spId
      params['spId'] = 'user'
      this.getChapterByApi(params).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.params.total = res.data.total
      })
    },
    updateChapter (params) {
      this.$refs['operateForm'].validate(valid => {
        if (valid) {
          this.updateChapterByApi(params).then(res => {
            this.closeOperateDialog()

            this.getChapter(this.params)
          })
        }
      })
    },
    updateChapterBtn (index, tableData) {
      this.operateString = 'update'
      this.operateDisabled = false
      this.dialogTitle = '审核'
      this.operateForm = tableData[index]
      this.showUpdateDialog = true
    },
    DialogClick (params) {
      this.updateChapter(this.operateForm)
    },
    queryChapterBtn () {
      this.params['chapterName'] = this.$refs['queryForm'].model.chapterName
      this.getChapter(this.params)
    },
    /**
       * @description 重置查询表单
       * @param {String} formName 表单名
       */
    resetQueryForm (formName) {
      this.$refs[formName].resetFields()
      this.paramsClean()
      this.getChapter(this.params)
    },
    closeOperateDialog () {
      this.showUpdateDialog = false
    },
    showOperateDialog () {
      this.showUpdateDialog = true
    },
    /**
       * 【分页】点击页面，表格显示对应页面
       * @param page 点击页
       */
    handleCurrentChange (page) {
      this.page = page
      this.params.page = page
      this.getChapter(this.params)
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    paramsClean () {
      this.params = {}
      this.params.status = 0
      this.params.size = this.size
    },
    /**
       * @description 调用api get接口，获取章节数据
       * @param {Object} params 查询参数
       * @return {Object} response 查询结果
       */
    async getCourseByApi () {
      let response
      await GetAllCourse().then(res => {
        response = res
      })
      return response
    },
    async getCourse () {
      await this.getCourseByApi().then(res => {
        this.courseData = res.data
      })
    },
    changeCourse (value) {
      console.log(value)
      this.params.courseId = value
      this.getChapter(this.params)
    },
    showAll () {
      if (this.params.status === '') {
        this.params.status = 0
        this.showALlMsg = '显示全部'
        this.getChapter(this.params)
      } else {
        this.params.status = ''
        this.showALlMsg = '显示审核'
        this.getChapter(this.params)
      }
    }
  },
  computed: {
    /**
       * 根据showLabel(显示的章节)和tableData(表格数据)以及colName_ch(label中文对照)处理出一个{英文label:中文label}对象
       * @return {{}} {en_label:ch_label}
       */
    colLabel () {
      let data = {}
      for (let item of this.showLabel) {
        data[item] = this.colName_ch[item]
      }
      return data
    }
  },
  created () {
    this.paramsClean()
    this.getCourse().then(res => {
      this.params.courseId = this.courseData[0].courseId
      this.courseId = this.courseData[0].courseId
      this.getChapter(this.params)
    })
  }
}
</script>

<style scoped>
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 40px;
  }

  .header h1 {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0;
  }

  .header .query_form {
    display: inline-block;
    vertical-align: middle;
  }

  .header .query_form > div {
    margin: 0;
  }

  .header .query_item {
    margin-right: 20px !important;
  }

  .operate_chapter {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .operate_chapter .el-form {
    width: 75%;
    background-color: #fff;
    position: relative;
  }

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
  }
</style>
